<template>
  <div class="preview__list">
    <p class="color__tips">
      <span :style="{ color: formatStatus(1).color }">红色 -- 有更新</span>
      <span :style="{ color: formatStatus(0).color }">黑色 -- 无更新</span>
      <span :style="{ color: formatStatus(3).color }">灰色 -- 格式不正确</span>
    </p>
    <el-table :data="list" row-key="button_id" border default-expand-all empty-text="暂无预览数据" max-height="700">
      <el-table-column prop="ButtonID" label="事件ID" align="center">
        <template slot-scope="scope">
          <span :style="{ color: formatStatus(scope.row.status).color }">{{ scope.row.ButtonID }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="ButtonName" label="事件名称" min-width="350px">
        <template slot-scope="scope">
          <span :style="{ color: formatStatus(scope.row.status).color }">{{ scope.row.ButtonName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="ParentID" label="父ID" align="center">
        <template slot-scope="scope">
          <span :style="{ color: formatStatus(scope.row.status).color }">{{ scope.row.ParentID }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <span :style="{ color: formatStatus(scope.row.status).color }">{{ formatStatus(scope.row.status).label }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    list: { type: Array, default: () => [] }
  },
  methods: {
    formatStatus (num) {
      const status = {
        0: { label: '无更新', color: '#333' },
        1: { label: '新增', color: 'red' },
        2: { label: '更新', color: 'red' },
        3: { label: '格式不正确', color: '#aeaeae' }
      }
      const def = { label: '--', color: '#333' }
      return status[num] || def
    }
  }
}
</script>

<style lang="scss" scoped>
.preview__list {
  width: 100%;
  height: 100%;
  background: #fff;
  margin-top: 20px;
}
.color__tips {
  display: flex;
  gap: 6px;
  padding-bottom: 10px;
}
</style>
